@page "/scheduler/remote-data"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Data
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This demo showcases the way of binding remote services to the Scheduler component. Here, the DataManager is used to bind the remote data with Scheduler.</p>
</SampleDescription>
<ActionDescription>
    <p>Scheduler can be bound to remote services by assigning the <code>DataSource</code> property with the instance of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Data.SfDataManager_members.html'>DataManager</a></code>. </p>
    <p>The DataManager here acts as an interface between the service endpoint and the Scheduler, and will require the below minimal information to interact with the service endpoint properly.</p>
    <ul>
        <li><code>Url</code> - Defines the service endpoint from where the data needs to be fetched.</li>
        <li><code>Adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for remote binding.</li>
    </ul>
    <p>Adaptor is responsible for processing response and request from/to the service endpoint. Importing <code>Syncfusion.Blazor.Data</code> package provides predefined adaptors which are designed to interact with particular service endpoints. They are as follows, </p>
    <ul>
        <li><code>UrlAdaptor</code> - Use this to interact with any remote services. This is the base adaptor for all the remote based adaptors.</li>
        <li><code>ODataAdaptor</code> - Use this to interact with OData endpoints.</li>
        <li><code>ODataV4Adaptor</code> - Use this to interact with OData V4 endpoints.</li>
        <li> <code>WebApiAdaptor</code> - Use this to interact with Web API created under OData standards. </li>
    </ul>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" Readonly="true">
            <ScheduleEventSettings TValue="ScheduleData.AppointmentData">
                <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Schedule" Adaptor="@Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
            </ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
@code{
    private DateTime CurrentDate = new DateTime(2020, 11, 22);
}
